<template>
  <div class="home">
    <!-- 欢迎区域 -->
    <el-card class="welcome-card">
      <div class="welcome-content">
        <h1>欢迎来到智能衣柜</h1>
        <p>让AI帮你打造完美搭配，记录每一次精彩穿搭</p>
        <div class="quick-actions">
          <el-button type="primary" size="large" @click="$router.push('/wardrobe/add')">
            <el-icon><Plus /></el-icon>
            添加衣服
          </el-button>
          <el-button type="success" size="large" @click="$router.push('/outfits/create')">
            <el-icon><MagicStick /></el-icon>
            创建搭配
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#409EFF"><Shirt /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.clothingCount }}</div>
              <div class="stat-label">件衣服</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#67C23A"><Collection /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.outfitCount }}</div>
              <div class="stat-label">套搭配</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#E6A23C"><Calendar /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.wearCount }}</div>
              <div class="stat-label">次穿搭</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#F56C6C"><Star /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.favoriteCount }}</div>
              <div class="stat-label">个收藏</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最近添加的衣服</span>
              <el-button type="text" @click="$router.push('/wardrobe')">查看更多</el-button>
            </div>
          </template>
          <div class="recent-items">
            <div v-for="item in recentClothing" :key="item.id" class="recent-item">
              <el-image
                :src="item.image || '/placeholder.jpg'"
                fit="cover"
                class="item-image"
              />
              <div class="item-info">
                <div class="item-name">{{ item.name }}</div>
                <div class="item-meta">{{ item.category }} · {{ item.addedTime }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最近的搭配</span>
              <el-button type="text" @click="$router.push('/outfits')">查看更多</el-button>
            </div>
          </template>
          <div class="recent-items">
            <div v-for="outfit in recentOutfits" :key="outfit.id" class="recent-item">
              <el-image
                :src="outfit.image || '/placeholder.jpg'"
                fit="cover"
                class="item-image"
              />
              <div class="item-info">
                <div class="item-name">{{ outfit.name }}</div>
                <div class="item-meta">{{ outfit.style }} · {{ outfit.createdTime }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { clothingAPI, statsAPI } from '@/api'
import { ElMessage } from 'element-plus'

// 统计数据
const stats = ref({
  clothingCount: 0,
  outfitCount: 0,
  wearCount: 0,
  favoriteCount: 0
})

// 最近添加的衣服
const recentClothing = ref([])

// 最近的搭配
const recentOutfits = ref([])

// 加载统计数据
const loadStats = async () => {
  try {
    const response = await statsAPI.getOverview()
    console.log('统计API响应:', response)

    const data = response.data
    stats.value = {
      clothingCount: data.clothing_count || 0,
      outfitCount: data.outfit_count || 0,
      wearCount: data.wear_record_count || 0,
      favoriteCount: data.favorite_clothing_count || 0
    }
    console.log('统计数据设置:', stats.value)
  } catch (error) {
    console.error('获取统计数据失败:', error)
    // 使用模拟数据作为后备
    stats.value = {
      clothingCount: 10,
      outfitCount: 3,
      wearCount: 25,
      favoriteCount: 5
    }
  }
}

// 加载最近的衣服
const loadRecentClothing = async () => {
  try {
    const data = await clothingAPI.getList({
      page: 1,
      pageSize: 5,
      sortBy: 'created_at',
      sortOrder: 'desc'
    })

    recentClothing.value = data.list.map(item => ({
      id: item.id,
      name: item.name,
      category: item.category?.name || '未知分类',
      image: item.main_image || '',
      addedTime: formatTime(item.created_at)
    }))
  } catch (error) {
    console.error('获取最近衣服失败:', error)
    // 使用模拟数据作为后备
    recentClothing.value = [
      { id: 1, name: '白色基础T恤', category: 'T恤', image: '', addedTime: '2天前' },
      { id: 2, name: '深蓝色直筒牛仔裤', category: '牛仔裤', image: '', addedTime: '3天前' },
      { id: 3, name: '白色小白鞋', category: '运动鞋', image: '', addedTime: '5天前' }
    ]
  }
}

// 加载最近的搭配
const loadRecentOutfits = async () => {
  try {
    // 暂时使用模拟数据，因为搭配功能还未完全实现
    recentOutfits.value = [
      { id: 1, name: '商务休闲', style: '商务', image: '', createdTime: '1天前' },
      { id: 2, name: '周末出游', style: '休闲', image: '', createdTime: '3天前' },
      { id: 3, name: '约会装', style: '正式', image: '', createdTime: '1周前' }
    ]
  } catch (error) {
    console.error('获取最近搭配失败:', error)
  }
}

// 格式化时间
const formatTime = (dateString) => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now - date
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) {
    return '今天'
  } else if (days === 1) {
    return '昨天'
  } else if (days < 7) {
    return `${days}天前`
  } else if (days < 30) {
    const weeks = Math.floor(days / 7)
    return `${weeks}周前`
  } else {
    const months = Math.floor(days / 30)
    return `${months}个月前`
  }
}

// 加载所有数据
const loadData = async () => {
  await Promise.all([
    loadStats(),
    loadRecentClothing(),
    loadRecentOutfits()
  ])
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: auto;
}

.welcome-card {
  margin-bottom: 20px;
  width: 100%;
}

.welcome-content {
  text-align: center;
  padding: 40px 20px;
}

.welcome-content h1 {
  font-size: 32px;
  color: #303133;
  margin-bottom: 10px;
}

.welcome-content p {
  font-size: 16px;
  color: #606266;
  margin-bottom: 30px;
}

.quick-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.stats-row {
  margin-bottom: 20px;
  width: 100%;
}

.stat-card {
  height: 120px;
  width: 100%;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 20px;
}

.stat-icon {
  margin-right: 20px;
  flex-shrink: 0;
}

.stat-info {
  flex: 1;
  min-width: 0;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recent-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 200px;
}

.recent-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.recent-item:hover {
  background-color: #f5f7fa;
}

.item-image {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  margin-right: 15px;
  flex-shrink: 0;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-meta {
  font-size: 12px;
  color: #909399;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .home {
    max-width: 100%;
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .welcome-content {
    padding: 30px 15px;
  }

  .welcome-content h1 {
    font-size: 28px;
  }

  .quick-actions {
    flex-direction: column;
    align-items: center;
  }

  .stat-content {
    padding: 15px;
  }

  .stat-number {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .welcome-content {
    padding: 20px 10px;
  }

  .welcome-content h1 {
    font-size: 24px;
  }

  .stat-content {
    flex-direction: column;
    text-align: center;
    padding: 10px;
  }

  .stat-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>
